import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
import './app.css'

/** app.css
 .Image {
  position: absolute;
  height: 400px;
  width: 400px;
}

 .example-enter {
  opacity: 0.01;
  transition: opacity .5s ease-in;
}

 .example-enter.example-enter-active {
  opacity: 1;
}

 .example-leave {
  opacity: 1;
  transition: opacity .5s ease-in;
}

 .example-leave.example-leave-active {
  opacity: 0;
}

 .link_active {
  color: #bbbbbb;
  text-decoration: none;
}
 */

const App = ({ children, location }) => (
    <div>
        <ul>
            <li><Link activeStyle={link_active} to="/page1">Page 1</Link></li>
            <li><Link activeStyle={link_active} to="/page2">Page 2</Link></li>
        </ul>

        <ReactCSSTransitionGroup
            component="div"
            transitionName="example"
            transitionEnterTimeout={500}
            transitionLeaveTimeout={500}
        >
      {React.cloneElement(children, {
          key: location.pathname
      })}
        </ReactCSSTransitionGroup>
    </div>
)
/**
 * 使用 ReactCSSTransitionGroup 将需要参与动画的组件包裹起来，设置 transitionName 为上app.css中定义好的样式名；
 */

const Page1 = () => (
    <div className="Image">
        <h1>Page 1</h1>
        <p></p>
    </div>
)

const Page2 = () => (
    <div className="Image">
        <h1>Page 2</h1>
        <p></p>
    </div>
)

<Router history={browserHistory}>
<Route path="/" component={App}>
    <Route path="page1" component={Page1} />
    <Route path="page2" component={Page2} />
</Route>
</Router>
